<template>
  <div id="riTop" class="top" :class="[showTop ? 'show' : 'hide']">
    <span v-if="detail.logoimage" class="icon" style="background-color: transparent;"><img :src="detail.logoimage" alt=""></span>
    <span v-else class="icon">{{detail.name.substr(0,1)}}</span>
    
    <span class="close-icon" @click="showTop = !showTop"><icon name="el-icon-Close" :size="20" /></span>
    <div class="div flex-1">
      <div class="name text-primary text-line1">{{detail.name}}</div>
      <div class="intro text-tx-secondary text-line2">{{detail.introduction}}</div>
    </div>
    <img src="@/assets/images/ai-tip.png" class="img" alt="" @click="showBeforeFun">
  </div>
  <el-dialog :append-to-body="true" v-model="showBefore" title="" width="460">
    <pre v-html="detail.beforeMsg"></pre>
  </el-dialog>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, shallowRef, computed, reactive} from 'vue';
const props = defineProps({
  detail:{
    type:Object,
    default:()=>{return {name:'', introduction:''}}
  }
})
const showTop = ref(true); // 手机端需要用
const showBefore = ref(false);
const showBeforeFun = () =>{
  console.log('props.detail--', props.detail)
  if(props.detail.beforeMsg){
    showBefore.value = !showBefore.value
  }
}
</script>
<style lang="scss" scoped>
  .top{
    border-radius: 12px; background-color: var(--el-color-primary-light-9); padding: 0px 40px; display: flex; align-items: center; justify-content:space-between; margin-bottom:25px;
    .img{height:140px;}
    .name{font-size:22px; margin-bottom:6px; font-weight:bold}
    .icon,.close-icon{display: none;}
    .icon{
      overflow: hidden;
      img{display: block; width: 100%; height: 100%; object-fit: cover;}
    }
  }
  
  // 手机端
  $topIconH:70px;
  @media only screen and (max-width: 769px){
    .top{
      padding: 0.3rem; position: relative;margin-bottom:0; margin-top: 0.2rem;
      &.show{display: flex;}
      &.hide{display: none;}
      .img{display:none}
      .name{font-size:0.36rem; margin-bottom:0px; margin-bottom: 0.03rem;}
      .intro{line-height:1.4; font-size:0.28rem;}
      .icon{background-color: var(--el-color-primary); width: $topIconH; min-width: $topIconH; height: $topIconH; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 40px; font-weight: bold; color: #fff; margin-right: 10px;}
      .close-icon{display: block; position: absolute; right: 10px; top:10px;}
    }
    
  }
</style>